<template>
  <div class="cart-page">
    <div v-if="!userStore.isLoggedIn" class="login-prompt">
      <h2>您还没有登录</h2>
      <p>请先登录后再查看购物车</p>
      <router-link to="/login" class="login-btn">
        去登录
      </router-link>
    </div>
    
    <div v-else>
      <div class="cart">
        <h2>购物车</h2>
        <div v-if="cartItems.length === 0">
          购物车是空的
        </div>
        <div v-else>
          <div class="select-all">
            <input type="checkbox" :checked="allSelected" @change="toggleAllSelection">
            <span>全选</span>
          </div>
          <table class="cart-table">
            <thead>
              <tr>
                <th></th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in cartItems" :key="item.id">
                <td>
                  <input type="checkbox" :checked="item.selected" @change="toggleItemSelection(item.id)">
                </td>
                <td>
                  <img :src="item.image" :alt="item.name" class="cart-item-image">
                  <span>{{ item.name }}</span>
                </td>
                <td>¥{{ item.price.toFixed(2) }}</td>
                <td>
                  <div class="quantity-control">
                    <button @click="decreaseQuantity(item.id)" :disabled="item.quantity <= 1">-</button>
                    <span>{{ item.quantity }}</span>
                    <button @click="increaseQuantity(item.id)">+</button>
                  </div>
                </td>
                <td>¥{{ (item.price * item.quantity).toFixed(2) }}</td>
                <td>
                  <button @click="removeFromCart(item.id)" class="remove-button">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="cart-summary">
            <span>已选择 {{ selectedItems.length }} 件商品</span>
            <span>总计: ¥{{ selectedTotalPrice.toFixed(2) }}</span>
            <button @click="goToPayment" class="checkout-button" :disabled="selectedItems.length === 0">
              结算
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useCartStore } from '../../stores/cartStore';
import { useRouter } from 'vue-router';
import { computed, onMounted } from 'vue';
import { useUserStore } from '../../stores/userStore';

const cartStore = useCartStore();
const userStore = useUserStore();
const router = useRouter();

onMounted(() => {
  cartStore.initializeSelection();
});

const cartItems = computed(() => cartStore.items);
const selectedItems = computed(() => cartStore.selectedItems);
const selectedTotalPrice = computed(() => cartStore.selectedTotalPrice);
const allSelected = computed(() => cartItems.value.length > 0 && cartItems.value.every(item => item.selected));

const goToPayment = () => {
  if (selectedItems.value.length > 0) {
    router.push('/Order/payment');
  }
};

const removeFromCart = (productId) => {
  cartStore.removeFromCart(productId);
};

const increaseQuantity = (productId) => {
  cartStore.updateCartItemQuantity(productId, cartStore.getCartItemQuantity(productId) + 1);
};

const decreaseQuantity = (productId) => {
  const currentQuantity = cartStore.getCartItemQuantity(productId);
  if (currentQuantity > 1) {
    cartStore.updateCartItemQuantity(productId, currentQuantity - 1);
  }
};

const toggleItemSelection = (productId) => {
  cartStore.toggleItemSelection(productId);
};

const toggleAllSelection = () => {
  cartStore.toggleAllSelection();
};
</script>
<style scoped>
.cart {
  padding: 20px;
}
.select-all {
  margin-bottom: 10px;
}
.cart-table {
  width: 100%;
  border-collapse: collapse;
}
.cart-table th, .cart-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.cart-table th {
  background-color: #f2f2f2;
}
.cart-item-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  margin-right: 10px;
}
.quantity-control {
  display: flex;
  align-items: center;
}
.quantity-control button {
  width: 25px;
  height: 25px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  cursor: pointer;
}
.quantity-control span {
  margin: 0 5px;
}
.remove-button {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}
.cart-summary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}
.cart-summary > * {
  margin-left: 20px;
}
.checkout-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
.checkout-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
.login-prompt {
  text-align: center;
  padding: 40px 20px;
  background: #f8f8f8;
  border-radius: 8px;
  margin: 20px;
}

.login-prompt h2 {
  color: #333;
  margin-bottom: 10px;
}

.login-prompt p {
  color: #666;
  margin-bottom: 20px;
}

.login-btn {
  display: inline-block;
  padding: 10px 30px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #0056b3;
}
</style>
